<template>
<div class="talk">
<button @click="getLoveTalk">获取一句土味情话</button>
  <ul>
    <li v-for="talk in talkStore.talkList" :key="talk.id">{{talk.title}}</li>
  </ul>
</div>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import axios from "axios";
import {storeToRefs} from "pinia";
import {nanoid} from "nanoid";
import {useTalkStore} from "@/store/loveTalk";
//使用useTalkStore,得到一个专门保存count相关的store
const talkStore=useTalkStore()//调用

const {talkList}=storeToRefs(talkStore)

talkStore.$subscribe((mutation, state)=>{
  console.log("talkStore保存数据发生变化",mutation,state)
  localStorage.setItem('talkList',JSON.stringify(state.talkList))
})
//这里的axios请求被封装到ts种直接用接收的去调用方法即可
//方法
function getLoveTalk(){
  //获取会话
talkStore.getATalk()
}

// async function getLoveTalk(){
//   //发起请求 连续解构赋值+重命名
//  let {data:{content:title}}=await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
//   //请求回来的字符串包装成一个对象
//   let obj={id:nanoid(),title}
//   //放到数组中
//   talkList.unshift(obj)
//   console.log(obj)
// }

</script>

<style scoped>
.talk{
  background-color: palevioletred;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>